<script setup lang="ts">
import { ref } from 'vue'
import { pageUrl } from '@/utils/constants'

// 获取页面参数
const query = defineProps<{
  id: number
}>()

const back = () => {
  uni.navigateBack({ delta: 1 })
}

const orderId = ref(query.id)
</script>

<template>
  <scroll-view enable-back-to-top class="viewport" scroll-y>
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">Order Received</view>
      <view class="buttons">
        <view class="button navigator" @tap="back"> Back </view>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`${pageUrl['order-evaluate']}?order_id=${orderId}`"
          open-type="redirect"
        >
          Rate Order
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  background-color: #f7f7f8;
}

.overview {
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  background-color: #ff7c22;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #fff;

    &:first-child {
      width: 200rpx;
      border-radius: 64rpx;
      border: 1rpx solid #fff;
    }
  }
}
</style>
